<style>
    video {
        width:    	   100%;
        height:    	   40%;
        background:    black;
        padding: 	   1.5em  0;
    }
    ul {
        margin:        0;
        height:		   60%;
        overflow:      auto;
        padding:       1em;
        list-style:    none;
    }
    ul > li > a {
        display:          inline-block;
        max-width:        100%;
        white-space:      nowrap;
        overflow:         hidden;
        text-overflow:    ellipsis;
        line-height:      1.5em;
    }
</style>
<script>
require(['jquery'],  function ($) {

    $().iWebApp().component(function () {

        var video = this.$_View.find('video')[0];

        this.$_View.on('click',  'a',  function () {

            var VTT = video.children[0];

            VTT.onerror = function () {

                this.removeAttribute('src');
            };
            VTT.src = this.href.replace(/\.\w+$/, '.vtt');

            video.src = this.href;

            arguments[0].preventDefault();
        });
    });
});
</script>
<video controls autoplay>
    <track srclang="zh-cn" label="简体中文" default>
</video>
<ul src="/video/">
    <li><a target="_blank" href="${this.path}" title="${this.name}">
        ${this.name}
    </a></li>
</ul>